<template>
  <div class="historyTable" v-loading="isLoading">
    <el-table
      stripe 
      border
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      :data="tableData" 
      style="width: 100%">
      <el-table-column align="center" prop="userName" label="账号" width="240"></el-table-column>
      <el-table-column align="center" :show-overflow-tooltip="true" prop="fileName" label="文件名">
        <template slot-scope="scope">
          <span v-if="!scope.row.isEdit">{{scope.row.fileName}}</span>
          <el-input 
            v-else
            v-model="scope.row.editValue" 
            :placeholder="scope.row.fileName"
          ></el-input>
        </template>
      </el-table-column>


      <el-table-column v-if="isShowOtherParameters('parme')" align="center" label="CV值" width="240">
        <template slot-scope="scope">
          {{ `CV：${scope.row.parme.CV}` }}
        </template>
      </el-table-column>
      <el-table-column v-if="isShowOtherParameters('parme')" align="center" label="平均值（AV）" width="240">
        <template slot-scope="scope">
          {{ `AV：${scope.row.parme.AV}` }}
        </template>
      </el-table-column>
      <el-table-column v-if="isShowOtherParameters('parme')" align="center" label="标准差（SD）" width="240">
        <template slot-scope="scope">
          {{ `SD：${scope.row.parme.SD}` }}
        </template>
      </el-table-column>


      <el-table-column align="center" prop="uploadTime" label="时间" width="240"></el-table-column>
      <el-table-column align="center" label="操作"> 
        <template slot-scope="scope">
          <slot name="btn" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: right; margin-top:20px;"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      background
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    isLoading: {
      type: Boolean,
      default: false
    },
    pageNo: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 20
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentPage: 1,
    };
  },
  // mounted () {
  //   if(this.historyModulePage[this.$route.name] >= 1){
  //     setTimeout(() => {
  //       this.handleCurrentChange(this.historyModulePage[this.$route.name])
  //     }, 500);
  //   }
  // },
  methods: {
    ...mapMutations('history', ['SET_MODULE_PAGE']),
    handleCurrentChange(val) {
      this.$emit('handlePageChange', val)
      // this.currentPage = val
      // this.SET_MODULE_PAGE({
      //   name: this.$route.name,
      //   number: val
      // })
    },

    // 判断 table 列展示模块
    isShowOtherParameters(key) {
      const result = this.tableData.some(item => !!Object.keys(item[key]).length )
      return result
    }
  },
  computed: {
    ...mapState('history', ['historyModulePage']),
    // 前端分页
    // dataList() {
    //   let index = 0;
    //   let newArr = [];
    //   while(index < this.tableData.length) {
    //     newArr.push(this.tableData.slice(index, index += 20));
    //   }
    //   return newArr;
    // }
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  // .el-table__column-filter-trigger {
  //   margin-left: 8px;
  // }
  .el-table td,
  .el-table th {
    padding: 5px 0;
    text-align: center;
    border: 1px solid #ebeef5;
  }
}
</style>
